<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}" />
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/theme.css">
	<style>
#footer {
    padding: 15px 0;
    background: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
}
#topcontrol {
  color: #fff;
  z-index: 99;
  width: 30px;
  height: 30px;
  font-size: 20px;
  background: #222;
  position: relative;
  right: 14px !important;
  bottom: 11px !important;
  border-radius: 3px !important;
}

#topcontrol:after {
  /*top: -2px;*/
  left: 8.5px;
  content: "\f106";
  position: absolute;
  text-align: center;
  font-family: FontAwesome;
}

#topcontrol:hover {
    color: #fff;
    background: #18ba9b;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.label-type, .label-status, .label-order {
    background-color: #fff;
    color: #f60;
    padding : 5px;
    border: 1px #f60 solid;
}
#typeList  :not(:first-child) {
    margin-top:20px;
}
.label-text {
    margin:0 10px;
}
.panel {
    border-radius:0;
}
h3.break {
    font-size:16px;
    display: block;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
h3.break>a {
    text-decoration:none;
}
	</style>
	
	<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/pagination.css"/>
	<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
	<script type="text/javascript" src="script/docs.min.js"></script>
    <script type="text/javascript" src="script/back-to-top.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
  <!--   <script type="text/javascript" src="project/my-allproject.js"></script> -->
    
	<script type="text/javascript">
			
			$(function(){
				
				
				
				// 调用后面声明的函数对页码导航条进行初始化操作
				initPagination();
				
				$("#statusText a").click(function(){
					
					var status = this.id;
					
					window.location.href="http://localhost/project/get/project/by/status/page?status="+status;
				}); 
				
				$("#orderby a").click(function(){
					var factor = this.id;
					window.location.href="http://localhost/project/get/project/orderby/page?factor="+factor;
				}); 
				
			});
			
			// 生成页码导航条的函数
			function initPagination(){
				// 获取总记录数
				var totalRecord = [[${pageInfo.total}]];
				
				// 声明一个JSON对象存储Pagination要设置的属性
				var properties = {
					num_edge_entries: 3,								// 边缘页数
					num_display_entries: 5,								// 主体页数
					callback: pageSelectCallback,						// 指定用户点击“翻页”的按钮时跳转页面的回调函数
					items_per_page: [[${pageInfo.pageSize}]],	// 每页要显示的数据的数量
					current_page: [[${pageInfo.pageNum-1}]],	// Pagination内部使用pageIndex来管理页码，pageIndex从0开始，pageNum从1开始，所以要减一
					prev_text: "上一页",									// 上一页按钮上显示的文本
					next_text: "下一页"									// 下一页按钮上显示的文本
				};
				
				// 生成页码导航条
				$("#Pagination").pagination(totalRecord, properties);
			};
			// 用户点击“上一页、下一页、1、2、3……”这样的页码时调用这个函数实现页面跳转
			// pageIndex是Pagination传给我们的那个“从0开始”的页码
			function pageSelectCallback(pageIndex, jQuery) {
				
				// 根据pageIndex计算得到pageNum
				window.pageNum = pageIndex + 1;
				// 跳转页面+"&keyword="[[${param.keyword}]]
				window.location.href = "http://localhost/project/get/all/project/page?pageNum="+pageNum;
				
				// 由于每一个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
				return false;
			} 
			 
			function showProjectByTypeId(typeId){
				
				window.location.href="http://localhost/project/get/project/by/type/page?typeId="+typeId;
			}
			
			$('#myTab a').click(function (e) {
				  e.preventDefault()
				  $(this).tab('show')
			}); 
				
	</script>
  </head>
   
  <body>
 <div class="navbar-wrapper">
      <div class="container">
			<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			  <div class="container">
				<div class="navbar-header">
				  <a class="navbar-brand" href="#" style="font-size:32px;">互联网众筹系统</a>
				</div>
             <div id="navbar" class="navbar-collapse collapse" style="float:right;">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  	<span th:if="${#strings.isEmpty(session.loginMember)}">游客</span>
					<span th:if="${not #strings.isEmpty(session.loginMember)}">[[${session.loginMember.username}]]</span>
					<span class="caret"></span>
				  </a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="http://localhost/auth/member/to/center/page"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                    <li class="divider"></li>
                    <!-- th:href="@{http://localhost/auth/member/logout} -->
                    <li><a href="index.html" th:href="@{/auth/member/logout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                  </ul>
                </li>
              </ul>
            </div>
			  </div>
			</nav>
      </div>
    </div>

    <div class="container theme-showcase" role="main">

        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li><a rel="nofollow" href="index.html" th:href="@{/}"><i
										class="glyphicon glyphicon-home"></i> 众筹首页</a></li>
								<li><a rel="nofollow" href="#"><i
										class="glyphicon glyphicon-th-large"></i> 众筹项目</a></li>
								<li><a rel="nofollow" href="http://localhost/project/agree/protocol/page"><i
										class="glyphicon glyphicon-edit"></i> 发起众筹</a></li>
								<li><a rel="nofollow" href="minecrowdfunding.html" th:href="@{/member/my/crowd}"><i
										class="glyphicon glyphicon-user"></i> 我的众筹</a></li>
							</ul>
						</div>
                    </nav>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <ul id="typeList" style="list-style: none;">
                                <li>
                                    <span class="label-type actvie"> 分类</span>
                                    <span th:if="${#strings.isEmpty(typeList)}">没有加载到任何项目分类</span>
                                    <span th:if="${not #strings.isEmpty(typeList)}">
                                    <span th:each="type:${typeList}">
                                     	<a class="label-text" th:onclick="showProjectByTypeId([[${type.id}]])" th:id="${type.id}" th:text="${type.name}">科技</a>
                                    </span>
                                    </span>
                                </li>
                                <li id="statusText">
                                   <span class="label-type actvie">  状态</span>
                                   <a  class="label-text" id="0">即将开始</a> 
                                   <a  class="label-text" id="1">众筹中</a> 
                                   <a  class="label-text" id="2">众筹成功</a> 
                                </li>
                                <li id="orderby">
                                   <span class="label-type actvie">  排序</span> 
                                   <a class="label-text" id="factor1">最新上线</a> 
                                   <a class="label-text" id="factor2">金额最多</a> 
                                   <a class="label-text" id="factor3">支持最多</a>
                                </li>
                            </ul>
                        </div>
                        <div class="panel-footer" style="height:50px;padding:0;">
                            <div style="float:left;padding:15px;">
                            共[[${pageInfo.total}]]个众筹项目
                            </div>
                            <div style="float:right;">
                                <form action="http://localhost/project/get/all/project/page"  method="post" class="navbar-form navbar-left" role="search">
                                    <div class="form-group">
                                        <input id="keywordInput" name="keyword" th:value="${keyword}" type="text" class="form-control" placeholder="请输入搜索内容">
                                    </div>
                                    <button id="searchBtn" type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	    <div class="container marketing">
			<div class="row">
				<div class="container">
					<div class="row clearfix">
						<div class="col-md-12 column">
							<div class="box ui-draggable" id="mainBox">
								
								<div class="mBd" style="padding-top: 10px;">
									<div class="row">
										<div th:if="${#strings.isEmpty(pageInfo.list)}">没有加载到任何項目信息</div>
		   									<div th:if="${not #strings.isEmpty(pageInfo.list)}"> 
											<div th:each="project : ${pageInfo.list}" class="col-md-3">
												<div class="thumbnail">
													<a th:href="'http://localhost/project/get/project/detail/'+${project.projectId}" href="project.html"><img alt="300x200" th:src="${project.headerPicturePath}" src="img/product-1.jpg" /></a>
													<div class="caption">
														<h3 class="break">
															<a th:href="'http://localhost/project/get/project/detail/'+${project.projectId}" href="project.html" th:text="${project.projectName}">活性富氢净水直饮机</a> 
															
														</h3>
														<p>
															<div style="float: left;">
																<i class="glyphicon glyphicon-screenshot" title="目标金额"></i>
																$<span th:text="${project.money}">20,000</span>
															</div>
															<div style="float: right;">
																<i title="截至日期" class="glyphicon glyphicon-calendar"></i>
																<span th:text="${project.deployDate}">2017-20-20</span>
															</div>
														</p>
														<br>
														<div class="progress" style="margin-bottom: 4px;">
															<div class="progress-bar progress-bar-success"
																role="progressbar" th:aria-valuenow="${project.percentage}" aria-valuenow="40" aria-valuemin="0"
																aria-valuemax="100" th:style="'width: '+${project.percentage}+'%'" style="width: 40%">
																<span th:text="${project.percentage}+'% '">40% </span>
															</div>
														</div>
														<div>
															<span style="float: right;"><i
																class="glyphicon glyphicon-star-empty"></i></span> <span><i
																class="glyphicon glyphicon-user" title="支持人数"></i> <span th:text="${project.supporter}">12345</span></span>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
		
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		
       
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column" style="text-align:center">
                     <div id="Pagination" class="pagination">
												<!-- 这里显示分页 -->
					 </div>
                </div>
            </div>
        </div>

        <div class="container" style="margin-top:20px;">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div id="footer">
                        <div class="footerNav">
                             <a rel="nofollow" href="http://www.atguigu.com">关于我们</a> | <a rel="nofollow" href="http://www.atguigu.com">服务条款</a> | <a rel="nofollow" href="http://www.atguigu.com">免责声明</a> | <a rel="nofollow" href="http://www.atguigu.com">网站地图</a> | <a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
                        </div>
                        <div class="copyRight">
                            Copyright ?2010-2014atguigu.com 版权所有
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
  </body>
</html>